<template>
    <div>
        <div class="w-form-header">
            <!-- <span>创建规格图</span> -->
            <div>
                <el-button
                    type="primary"
                    @click="save('0')"
                    :loading="submitLoading"
                    >保存</el-button
                >
                <el-button
                    type="success"
                    @click="save('2')"
                    :loading="saveLoading"
                    >提交</el-button
                >
            </div>
        </div>
        <div class="admin-content">
            <div class="gva-form-box">
                <div class="w-form-box">
                    <div class="list-header">基础信息</div>
                    <el-form
                        :model="formData"
                        ref="elFormRef"
                        label-position="right"
                        :rules="rule"
                        label-width="90px"
                        :inline="true"
                        class="form-inline"
                    >
                        <!-- 款式编号 -->
                        <el-form-item
                            :label="`${il8n('kuanshibianhao.label')}:`"
                            prop="styleNum"
                        >
                            <div
                                style="
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                "
                            >
                                <el-select
                                    v-model="formData.styleNum"
                                    :clearable="true"
                                    :placeholder="
                                        il8n('kuanshibianhao.placeholder')
                                    "
                                    style="min-width: 150px; margin-right: 10px"
                                    filterable
                                    remote
                                    :remote-method="getProductStylesListFn"
                                    @change="styleNumChange"
                                >
                                    <el-option
                                        v-for="item in productStylesList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                                <el-icon @click="openCreateAndEdit">
                                    <Search />
                                </el-icon>
                            </div>
                        </el-form-item>
                        <!-- 结构 -->
                        <el-form-item
                            :label="`${il8n('jiegou.label')}:`"
                            prop="structure"
                        >
                            <el-select
                                v-model="formData.structure"
                                :clearable="true"
                                :placeholder="il8n('jiegou.placeholder')"
                            >
                                <el-option
                                    v-for="item in dictOptions.structure"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 审批流程 -->
                        <el-form-item
                            :label="`${il8n('shenpiliucheng.label')}:`"
                            prop="approvalProcess"
                        >
                            <el-select
                                v-model="formData.approvalProcess"
                                :clearable="true"
                                :placeholder="
                                    il8n('shenpiliucheng.placeholder')
                                "
                            >
                                <el-option
                                    v-for="item in dictOptions.approvalProcess"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 图纸编号 -->
                        <el-form-item
                            :label="`${il8n('tupianbianhao.label')}:`"
                            prop="drawingNum"
                        >
                            <el-input
                                v-model="formData.drawingNum"
                                :placeholder="il8n('tupianbianhao.placeholder')"
                                disabled
                            />
                        </el-form-item>
                        <!-- 分类 -->
                        <el-form-item
                            :label="`${il8n('fenlei.label')}:`"
                            prop="drawingCharacterCate"
                        >
                            <el-select
                                v-model="formData.drawingCharacterCate"
                                :clearable="true"
                                :placeholder="il8n('fenlei.placeholder')"
                                @change="drawingCharacterCateChange('change')"
                            >
                                <el-option
                                    v-for="item in dictOptions.drawingCharacterCate"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 图纸分类 -->
                        <el-form-item
                            :label="`${il8n('tuzhifenlei.label')}:`"
                            prop="drawingCate"
                        >
                            <el-select
                                v-model="formData.drawingCate"
                                :clearable="true"
                                :placeholder="il8n('tuzhifenlei.placeholder')"
                                filterable
                                @change="drawingCateChange"
                                @focus="drawingCateFocus"
                            >
                                <el-option
                                    v-for="item in drawingCateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 资料类型 -->
                        <el-form-item
                            :label="`${il8n('ziliaoleixing.label')}:`"
                            prop="dataType"
                        >
                            <el-select
                                v-model="formData.dataType"
                                :disabled="
                                    formData.drawingCharacterCate ==
                                        '概念规格图' ||
                                    formData.drawingCharacterCate ==
                                        '概念規格圖'
                                "
                                :clearable="true"
                                :placeholder="''"
                                filterable
                                @change="dataTypeChange"
                            >
                                <template v-if="formData.drawingCate == '3D'">
                                    <el-option
                                        v-for="item in dictOptions.drawingDataType"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </template>
                                <template v-else>
                                    <el-option
                                        v-for="item in dictOptions.drawingDataType.slice(
                                            0,
                                            3
                                        )"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                        <!-- 尺码 -->
                        <el-form-item
                            :label="`${il8n('chima.label')}:`"
                            prop="displaySize"
                        >
                            <el-select
                                v-model="formData.displaySize"
                                :clearable="true"
                                :placeholder="il8n('chima.placeholder')"
                                value-key="value"
                            >
                                <el-option
                                    v-for="item in displaySizeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 镜架材质 -->
                        <el-form-item
                            :label="`${il8n('jingjiacaizhi.label')}:`"
                            prop="frameMaterials"
                        >
                            <el-input
                                v-model="formData.extend.frameMaterials"
                                placeholder="自动获取"
                                :disabled="true"
                            />
                        </el-form-item>

                        <!-- 自制配件 -->
                        <el-form-item
                            :label="`${il8n('zizhipeijian.label')}:`"
                            prop="selfMadeAccessory"
                            style="width: 100%"
                        >
                            <el-checkbox
                                v-for="item in formData.selfMadeAccessory"
                                :key="item.value"
                                :label="item.label"
                                v-model="item.checked"
                            >
                                {{ item.label }}
                            </el-checkbox>
                        </el-form-item>
                        <!-- 备注 -->
                        <el-form-item
                            :label="`${il8n('beizhu.label')}:`"
                            prop="note"
                            style="width: 100%"
                        >
                            <el-input
                                v-model="formData.note"
                                :placeholder="il8n('beizhu.placeholder')"
                                :clearable="true"
                                type="textarea"
                                style="width: 100%"
                                :autosize="{ minRows: 1 }"
                                :maxlength="500"
                                show-word-limit
                            />
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 计划时间 -->
            <div class="gva-form-box">
                <div class="w-form-box">
                    <div class="list-header">
                        图纸列表
                        <!-- <el-button
                            :loading="uploadLoading"
                            @click="uploadDialogVisible = true"
                            type="primary"
                            >上传图纸</el-button
                        > -->
                    </div>
                    <div>
                        <el-table
                            :data="formData.drawingLists"
                            border
                            style="width: 100%"
                        >
                            <el-table-column
                                label="序号"
                                width="80"
                                type="index"
                            />
                            <el-table-column
                                label="图纸名称"
                                prop="drawingName"
                            ></el-table-column>
                            <el-table-column label="图纸类型">
                                <template #default="scope">
                                    <el-select
                                        v-model="scope.row.drawingType"
                                        :clearable="true"
                                        :placeholder="'选择类型'"
                                        @change="dTypeChange(scope.row)"
                                    >
                                        <el-option
                                            v-for="item in dictOptions.drawingCate"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="上传时间" prop="CreatedAt">
                                <template #default="{ row }">
                                    {{ formatDate(row.CreatedAt,"yyyy-MM-dd hh:mm:ss") }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right">
                                <template #default="{ row, $index }">
                                    <a
                                        @click="delImage(row, $index)"
                                        style="color: red; cursor: pointer"
                                        >删除</a
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <el-upload
                            :action="`${path}/fileUploadAndDownload/upload`"
                            :on-change="checkFile"
                            drag
                            :multiple="true"
                            :on-error="uploadError"
                            :on-success="uploadSuccess"
                            style="margin-left: 25px; display: inline"
                            :show-file-list="false"
                            :headers="{
                                'x-token': xToken,
                                'x-user-id': xUserId,
                                Authorization: `Bearer ${xToken}`,
                            }"
                        >
                            <div style="color: #999999;">拖拽到此区域即可完成批量上传</div>
                        </el-upload>
                    </div>
                </div>
            </div>
        </div>
        <styleNumSearch
            v-if="editReasonDialogShow"
            @closeDialog="closeDialog"
            @selectStyleNum="selectStyleNum"
        >
        </styleNumSearch>

        <!-- 附件长传弹窗 -->
        <!-- <el-dialog v-model="uploadDialogVisible" title="文件上传" width="800">
            <el-upload
                :action="`${path}/fileUploadAndDownload/upload`"
                :before-upload="checkFile"
                drag
                :on-error="uploadError"
                :on-success="uploadSuccess"
                :show-file-list="false"
                style="margin-left: 25px; display: inline"
                :headers="{
                    'x-token': xToken,
                    'x-user-id': xUserId,
                    Authorization: `Bearer ${xToken}`,
                }"
            >
                <el-button :loading="uploadLoading" type="primary"
                    >上传</el-button
                >
            </el-upload>
        </el-dialog> -->
    </div>
</template>

<script setup>
import {
    createDdmsSpecDrawing,
    updateDdmsSpecDrawing,
    findDdmsSpecDrawing,
} from "@/api/plmDdmsSpecDrawing";
import { getProductStylesList } from "@/api/plmProductStyles";
import {
    getDrawingCategoryList,
    getSizesAndSpecs,
    getWorkflowDefList,
} from "@/api/drawingCategory";
import { createApplication } from "@/api/workflow";
import { getSysDictionaryDetailList } from "@/api/sysDictionaryDetail"; // 获取字典
import { getDesignDrawingCategoryList } from "@/api/confDesignDrawingCategory.js";
import { getConceptDrawingCategoryList } from "@/api/confConceptDrawingCategory.js";
import { useUserStore } from "@/pinia/modules/user";
defineOptions({
    name: "DdmsSpecDrawingAdd",
});

// 自动获取字典
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getDictFunc } from "@/utils/format";
import { useDict } from "@/utils/dictionary";
import { emitter } from "@/utils/bus.js";
import { deepClone2 } from "@/utils/tool.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { isVideoMime, isImageMime, isDWG } from "@/utils/image";
import { formatDate } from "@/utils/format";
import { useI18n } from "vue-i18n";
import styleNumSearch from "@/components/styleNumSearch/styleNumSearch.vue";
const { t: il8n } = useI18n();

const route = useRoute();
const router = useRouter();

// 款式编号列表
const productStylesList = ref([]);
const type = ref("");
const elFormRef = ref();
const rule = ref({
    styleNum: [
        { required: true, message: "请选择款式编号", trigger: "change" },
    ],
    // displaySize:[ { required: true, message: "请选择尺码", trigger: "change" },]
});
const formData = ref({
    drawingLists: [], //图纸列表
    styleNum: "",
    drawingCate: "", //图纸分类
    dataType: "", //资料类型
    // 自制配件
    selfMadeAccessory: [
        // {
        //     label: "SH/PDC03054-A",
        //     value: "SH/PDC03054-A",
        //     checked: false,
        //     disable: false,
        // },
    ],
    extend: {
        frameMaterials: "",
    },
});
const saveLoading = ref(false);
const uploadDialogVisible = ref(false);
const submitLoading = ref(false);
const dictOptions = ref({
    // 审批流程
    approvalProcess: [
        // { label: "0 設計規格客圖流程", value: "0 設計規格客圖流程" },
        // { label: "0設計規格ST101流程", value: "0設計規格ST101流程" },
        // { label: "1 設計規格INHSE流程", value: "1 設計規格INHSE流程" },
        // { label: "3 3D圖流程 UG", value: "3 3D圖流程 UG" },
        // { label: "3 注塑部2D圖紙確認", value: "3 注塑部2D圖紙確認" },
        // { label: "3D-客戶参考圖", value: "3D-客戶参考圖" },
        // { label: "3Win-wiN组图纸", value: "3Win-wiN组图纸" },
    ],
    // 结构
    structure: [],
    // 图纸类型
    drawingCate: [],
    //分类
    drawingCharacterCate: [],
    // 资料类型
    drawingDataType: [],
});
// 显示尺码
const displaySizeOptions = ref([]);
// 图纸分类
const drawingCateOptions = ref([]);
const fileList = ref([]);

// 初始化方法
const init = async () => {
    // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
    if (route.query.id) {
        const res = await findDdmsSpecDrawing({ ID: route.query.id });
        if (res.code === 0) {
            formData.value = res.data.reddmsSpecDrawing;
            type.value = "update";
        }
    } else {
        type.value = "create";
    }
};

init();
// 保存按钮
const save = async (val) => {
    elFormRef.value?.validate(async (valid) => {
        if (!valid) return;
        let submitForm = deepClone2(formData.value);
        if (!submitForm["displaySize"]) {
            submitForm["displaySize"] = {};
        }
        if (!submitForm["selfMadeAccessory"]) {
            submitForm["selfMadeAccessory"] = [];
        }
        if (submitForm.displaySize?.value) {
            submitForm.displaySize["checked"] = true;
        }
        let res;
        if (val == "0") {
            submitForm["status"] = "0";
            submitLoading.value = true;
        } else if (val == "1") {
            submitForm["status"] = "1";
            saveLoading.value = true;
        } else if (val == "2") {
            if (!submitForm.approvalProcess) {
                ElMessage({
                    type: "warning",
                    message: "请选择审批流程!",
                });
                return;
            }
            if (
                !submitForm.drawingLists ||
                submitForm.drawingLists.length == 0
            ) {
                ElMessage({
                    type: "warning",
                    message: "沒有上圖紙不允許提交!",
                });
                return;
            }
            submitForm["status"] = "2";
            saveLoading.value = true;
        }

        res = await createDdmsSpecDrawing(submitForm);
        saveLoading.value = false;
        submitLoading.value = false;
        if (res.code === 0) {
            if (val == 2) {
                // const params = {
                //     workflowdef_id: Number(submitForm.approvalProcess),
                //     title: dictOptions.value.approvalProcess.filter(
                //         (item) => item.value == submitForm.approvalProcess
                //     )[0].label,
                //     detail_url: `/#/layout/ddmsSpecDrawingView?ddmsNum=${res.data.ddmsNum}&subTitle=${res.data.drawingNum}&isView=true`,
                //     notify_url_approved: res.data.notifyUrlApproved,
                //     notify_url_rejected: res.data.notifyUrlRejected,
                //     appName:'spec_ddms',
                //     projectNum:res.data.ddmsNum,
                // };
                // const result = await createApplication(params);
                // if (result.code == 0) {
                    emitter.emit("closeThisPage", {
                        path: "/layout/ddmsSpecDrawingView",
                        query: {
                            ddmsNum: res.data.ddmsNum,
                            subTitle: res.data.drawingNum,
                        },
                    });
                    ElMessage({
                        type: "success",
                        message: "创建成功",
                    });
                // }
            } else {
                if (res.code === 0) {
                    emitter.emit("closeThisPage", {
                        path: "/layout/ddmsSpecDrawingView",
                        query: {
                            ddmsNum: res.data.ddmsNum,
                            subTitle: res.data.drawingNum,
                        },
                    });
                    ElMessage({
                        type: "success",
                        message: "创建成功",
                    });
                }
            }
        }
    });
};

// 获取款式列表
async function getProductStylesListFn(keyword) {
    const res = await getProductStylesList({
        page: 1,
        pageSize: 50,
        styleNum: keyword,
        status: "1",
    });
    if (res.code === 0) {
        productStylesList.value = res.data.list.map((rdlm) => ({
            value: rdlm.styleNum,
            label: rdlm.styleNum,
            ...rdlm,
        }));
    }
}

// 款式编号改变
const styleNumChange = () => {
    let index = productStylesList.value.findIndex((item) => {
        return item.styleNum == formData.value.styleNum;
    });
    if (index != -1) {
        formData.value["extend"].frameMaterials =
            productStylesList.value[index].frameMaterial;
    }
    getSizesAndSpecsFun();
};

// 根据款式编号获取尺码和配件编号
const getSizesAndSpecsFun = () => {
    let params = {
        styleNum: formData.value.styleNum,
        searchType: "ddmsSpecDrawing",
    };
    formData.value.selfMadeAccessory = [];
    displaySizeOptions.value = [];
    formData.value.displaySize = null; // 尺码
    getSizesAndSpecs(params).then((res) => {
        formData.value.selfMadeAccessory = res.data.specs;
        displaySizeOptions.value = res.data.sizes;
    });
};

// 删除图片列表
const delImage = (row, index) => {
    console.log(row, index);
    ElMessageBox.confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        if (row.drawingType == "中文") {
            formData.value["drawingNum"] = "";
        }
        formData.value.drawingLists.splice(index, 1);
    });
};
// 图纸分类改变
const drawingCharacterCateChange = (type) => {
    if (type == "change") {
        drawingCateOptions.value = []; // 图纸分类
        formData.value.drawingCate = ""; // 图纸分类
        // formData.value.displaySize = null; // 尺码
        formData.value.dataType = ""; // 资料类型
    }
    let drawingCharacterCate = formData.value.drawingCharacterCate;
    if (
        drawingCharacterCate == "概念规格图" ||
        drawingCharacterCate == "概念規格圖"
    ) {
        getConceptDrawingCategoryListFun();
    } else {
        drawingCateOptions.value = [
            { label: "2D", value: "2D" },
            { label: "3D", value: "3D" },
        ];
    }
};

const drawingCateFocus = () => {
    if (!formData.value.drawingCharacterCate) {
        ElMessage({ type: "warning", message: "请先选择分类" });
        return;
    }
};
// 图纸分类改变
const drawingCateChange = (val) => {
    formData.value.dataType = "";
    // formData.value.displaySize = null;
};
// 资料类型改变
const dataTypeChange = () => {
    // formData.value.displaySize = null;
};

// 分页获取--概念图纸分类 库列表
const getConceptDrawingCategoryListFun = () => {
    getSysDictionaryDetailList({
        page: 1,
        pageSize: 99,
        sysDictionaryID: 59,
    }).then((res) => {
        if (res.code === 0) {
            drawingCateOptions.value = res.data.list
                .map((item) => {
                    return {
                        label: item.value,
                        value: item.value,
                        dataType: item.label,
                        displaySizeShow: item.extend,
                    };
                })
                .filter((res) => {
                    return !!res.value;
                });
        }
    });
};

// 上传图片
const uploadLoading = ref(false);
const path = ref(import.meta.env.VITE_BASE_API);

const userStore = useUserStore();
const xToken = ref("");
const xUserId = ref("");
xToken.value = userStore.token;
xUserId.value = userStore.userInfo.ID;
// 上传检查
const checkFile = (file, files) => {
    console.log('file=======>',  file, files.value);
    uploadLoading.value = true;
    const isLt500K = file.size / 1024 / 1024 < 0.5; // 500K, @todo 应支持在项目中设置
    const isLt5M = file.size / 1024 / 1024 < 5; // 5MB, @todo 应支持项目中设置
    const isVideo = isVideoMime(file.type);
    const isImage = isImageMime(file.type);
    const isDwg = isDWG(file);
    let pass = true;
    // if (!isVideo && !isImage && !isDwg) {
    //     ElMessage.error(
    //         "上传图片只能是 jpg,png,svg,webp,dwg 格式, 上传视频只能是 mp4,webm 格式!"
    //     );
    //     uploadLoading.value = false;
    //     pass = false;
    // }
    // if (!isLt5M && isVideo) {
    //     ElMessage.error("上传视频大小不能超过 5MB");
    //     uploadLoading.value = false;
    //     pass = false;
    // }
    // if (!isLt500K && isImage) {
    //     ElMessage.error("未压缩的上传图片大小不能超过 500KB，请使用压缩上传");
    //     uploadLoading.value = false;
    //     pass = false;
    // }
    // return pass;
    return true;
};
// 上传成功
const uploadSuccess = (res) => {
    const { data } = res;
    uploadLoading.value = false;
    if (data.file) {
        // emit('on-success', data.file.url)
        let drawingType = "";
        let list1 = formData.value.drawingLists.filter((item) => {
            return item.drawingType == "中文";
        });
        let list2 = formData.value.drawingLists.filter((item) => {
            return item.drawingType == "英文";
        });
        if (list1.length == 0) {
            drawingType = "中文";
            formData.value["drawingNum"] = data.file.name.split(".")[0];
        } else if (list2.length == 0) {
            drawingType = "英文";
        } else {
            drawingType = "参考";
        }
        formData.value.drawingLists.push({
            drawingName: data.file.name, //图纸名称
            fileUrl: data.file.url, //文件路径
            CreatedAt: data.file.CreatedAt,
            drawingType: drawingType,
        });
        uploadDialogVisible.value = false;
        ElMessage({
            type: "success",
            message: "上传成功",
        });
    }
};
// 上传失败
const uploadError = () => {
    ElMessage({
        type: "error",
        message: "上传失败",
    });
    fullscreenLoading.value = false;
};

const dTypeChange = (val) => {
    let list1 = formData.value.drawingLists.filter((item) => {
        return item.drawingType == "中文";
    });
    if (list1 && list1.length > 1) {
        val["drawingType"] = "";
        ElMessage({
            type: "warning",
            message: "图纸类型只能一个中文图纸类型",
        });
        return;
    }
    formData.value["drawingNum"] = "";
    if (list1 && list1[0]) {
        formData.value["drawingNum"] = list1[0].drawingName.split(".")[0];
    }
};

// 款式查询弹窗
const editReasonDialogShow = ref(false);
// 打开 新增、编辑
const openCreateAndEdit = () => {
    editReasonDialogShow.value = true;
};

// 关闭款式查询弹窗
function closeDialog(params) {
    editReasonDialogShow.value = false;
}

function selectStyleNum(params) {
    formData.value.styleNum = params.styleNum;
    formData.value["extend"].frameMaterials = params.frameMaterial;
    getSizesAndSpecsFun();
    editReasonDialogShow.value = false;
}

// 获取审批流
const getWorkflowDefListFun = () => {
    getWorkflowDefList({ keyword: "spec_ddms" }).then((res) => {
        if (res.code == 0) {
            dictOptions.value.approvalProcess = res.data.list?.map((item) => {
                return {
                    label: item.name,
                    value: item.ID + "",
                };
            });
        }
    });
};

onMounted(async () => {
    xToken.value = userStore.token;
    xUserId.value = userStore.userInfo.ID;
    // 获取产品款式列表
    getProductStylesListFn();
    // 获取字典
    await useDict(
        "drawingCharacterCate",
        "structure",
        "drawingCate",
        "drawingDataType"
    ).then((dict) => {
        dictOptions.value = Object.assign(dictOptions.value, dict);
    });
    // 获取审批流
    getWorkflowDefListFun();
    // 获取图纸分类
    // await getDrawingCategoryList({ page: 1, pageSize: 999 }).then((res) => {
    //     if (res.code === 0) {
    //         drawingCateOptions.value = res.data.list.map((item) => {
    //             return {
    //                 label: item.drawingCate,
    //                 value: item.drawingCate,
    //                 dataType: item.dataType,
    //             };
    //         });
    //     }
    // });
});
</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
:deep(.el-upload-dragger){
    border: 1px dashed var(--el-color-primary);
    &>div{
    font-size: 18px !important;
    }
}
</style>